import { observer } from 'mobx-react'
import close from '@/resource/home/close.png'
import { useHistory } from 'umi'
import styles from './index.module.less'
export default observer((props: any) => {
    const history = useHistory()
    const { name, imgUrl, type, visible, setVisible, id } = props
    const textContent = () => {
        if (type === 1) {
            return `“${name}”探索完成，收获一枚荣誉勋章！`
        } else {
            return `“${name}”任务完成，收获一枚金币！`
        }
    }
    const okButton = () => {
        if (type === 1) {
            setVisible(false)
        } else {
            setVisible(false)
            history.push(`/level?id=${id}`)
        }
    }
    return visible ? (
        <div className={styles.pages}>
            <div className={styles.modal}>
                <div className={styles.top}>
                    {type === 1 ? '探索完成' : '任务完成'}
                    <img src={close} onClick={okButton} />
                </div>
                <div className={styles.middle_view}> {textContent()}</div>
                <div className={styles.img_view}>
                    <img src={imgUrl} />
                </div>
                <div className={styles.button} onClick={okButton}>
                    <span>ok</span>
                </div>
            </div>
        </div>
    ) : null
})
